<template>
  <div class="shoppingCart">
    <!-- 头部 -->
    <div class="dark-top">
      <a @click="goback" class="page-back"><div></div></a>
      <div class="page-title">
        <font style="vertical-align: inherit;">购物车</font>
      </div>
    </div>
    <!-- 列表内容 -->
    <div class="dark-body">
      <div
        class="dark-content"
        v-show="key.number == 0 ? false : true"
        v-for="(key, idx) in isList"
        :key="key.id"
      >
        <div class="dark-cont-img">
          <div :style="{ backgroundImage: 'url(' + key.picture + ')' }"></div>
        </div>
        <div class="cont-list-right">
          <h4>{{ key.headline }}</h4>
          <p>规格：{{ key.gauge }}</p>

          <div>
            <span class="span_yuan">￥{{ key.price }}</span>
            <span class="span_button">
              <template>
                <button class="add" @click="add(idx)"></button>
                {{ key.number }}
                <button class="cut" @click="cuts(idx)"></button>
              </template>
            </span>
          </div>
        </div>
      </div>
      <div style="height:3.75rem;"></div>
    </div>

    <div style="height:3.75rem;"></div>
    <!-- 底部	 -->
    <div class="dark-foot">
      <div class="foot-left">
        <p>
          共{{ total }}件 合计：<span class="font-left-color"
            >{{ combined }}元</span
          >
        </p>
        <p>
          实付：<span class="font-left-color">{{ combined }}元</span>
          <!-- 折扣：<span class="font-left-color"100元</span> -->
        </p>
      </div>
      <div class="foot-button" @click="ConsultApprove">立即支付</div>
    </div>

    <div class="dialog">
      <!--外层的遮罩 点击事件用来关闭弹窗，isShow控制弹窗显示 隐藏的props-->
      <div class="dialog-cover back" v-show="isShow" @click="closeMyself"></div>
      <transition name="drop">
        <div class="dialog-content" v-show="isShow">
          <div class="dialog-top">
            <div class="dialog-colse" @click="closeDialog"></div>
            <div class="dialog-title">填写地址</div>
            <div class="dialog-clear" @click="closeInfo">清除</div>
          </div>
          <!--弹窗的内容-->
          <div class="dialog-con-style">
            <div class="con-style-box">
              <span>收货人姓名</span
              ><input ref="dropName" type="text" :value="address.name" />
            </div>
            <div class="con-style-box">
              <span>收货人电话</span
              ><input
                ref="dropTel"
                type="number"
                placeholder="填写手机号"
                :value="address.phone"
              />
            </div>
            <div class="con-style-box">
              <span>苑/楼</span
              ><input ref="dropSite1" type="text" :value="address.site1" />
            </div>
            <div class="con-style-box">
              <span>栋数</span
              ><input ref="dropSite2" type="number" :value="address.site2" />
            </div>
            <div class="con-style-box">
              <span>寝室号</span
              ><input
                ref="dropSite3"
                type="text"
                placeholder="4单元 502"
                :value="address.site3"
              />
            </div>
          </div>
          <!--弹窗确认按钮-->
          <div class="dialog-confirm" @click="bounced">确认收货地址</div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data: function() {
    return {
      total: 0,
      number: 0,
      combined: 0,
      isList: [],
      spIdData: [],
      isShow: false,
      address: []
    };
  },
  created() {
    this.selectGoodsCart();
  },
  methods: {
    cuts: function(idx) {
      if (this.isList[idx].number < 1) return;
      if (this.isList[idx].number == 1) {
        this.deleteGoodsCart(this.isList[idx].id);
      }
      this.isList[idx].number--;
      this.total--;
      var non = this.isList[idx].price;
      this.combined -= non;
      this.updateGoodsCart(this.isList[idx].id, this.isList[idx].number);
    },
    add: function(idx) {
      this.isList[idx].number++;
      this.total++;
      this.combined =
        parseFloat(this.combined) + parseFloat(this.isList[idx].price);
      this.updateGoodsCart(this.isList[idx].id, this.isList[idx].number);
    },
    goback() {
      this.$router.go(-1);
    },
    bounced() {
      //联系地址填写
      let name = this.$refs.dropName.value;
      let tel = this.$refs.dropTel.value;
      let site1 = this.$refs.dropSite1.value;
      let site2 = this.$refs.dropSite2.value;
      let site3 = this.$refs.dropSite3.value;
      let site = site1 + "-" + site2 + "-" + site3;
      Indicator.open({ spinnerType: "fading-circle" });
      this.addGoodsCart(name, tel, site);
      this.closeDialog();
    },
    closeMyself() {
      this.isShow = true; //显示弹框
      this.selectBouncedAddress();
    },
    closeDialog() {
      this.isShow = false; //关闭弹窗
    },
    closeInfo() {
      this.address = []; //清除内容
    },
    //弹框获取上一次地址
    selectBouncedAddress() {
      let me = this;
      this.$axios
        .post(
          "/api/mall/bouncedAddress",
          { uid: localStorage.uid },
          { emulateJSON: true }
        )
        .then(kun => {
          //console.log(kun);
          if (kun.code == 200) {
            me.address = kun.data;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    selectGoodsCart() {
      //获取购物车列表
      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post(
          "/api/mall/shoppingCartPage",
          { uid: localStorage.uid },
          { emulateJSON: true }
        )
        .then(kun => {
          console.log(kun);
          Indicator.close();
          if (kun.code == 200) {
            me.isList = kun.data;
            var obj = kun.data;
            obj.forEach(function(value, key) {
              console.log(obj[key]["headline"]);
              var pic = obj[key]["number"] * obj[key]["price"];
              me.combined = parseFloat(me.combined) + pic;
              me.total = parseFloat(me.total) + parseFloat(obj[key]["number"]);
              me.spIdData.push(obj[key]["sp_id"]);
            });
          } else {
            Toast(kun.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    deleteGoodsCart(val) {
      //删除购物车商品
      this.$axios
        .post(
          "/api/mall/shoppingCartDelete",
          {
            uid: localStorage.uid,
            gw_id: val
          },
          { emulateJSON: true }
        )
        .then(kun => {
          console.log(kun);
          if (kun.code != 200) {
            Toast(kun.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    updateGoodsCart(val, num) {
      //购物车商品数量修改
      this.$axios
        .post(
          "/api/mall/shoppingCartUpdate",
          {
            uid: localStorage.uid,
            gw_id: val,
            number: num
          },
          { emulateJSON: true }
        )
        .then(kun => {
          console.log(kun);
          if (kun.code != 200) {
            Toast(kun.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 进行商城认证判断
    ConsultApprove() {
      if (this.combined <= 0) {
        Toast("请选择商品");
        return false;
      }
      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post(
          "/api/mall/consultApprove",
          { uid: localStorage.uid },
          { emulateJSON: true }
        )
        .then(kun => {
          //console.log(kun);
          if (kun.code == 200) {
            //认证后 唤起弹框
            me.closeMyself();
          } else if (kun.code == 600) {
            // 未认证 跳转
            me.$router.push({ name: "ConsultApprove" });
          }
          Indicator.close();
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    addGoodsCart(name, tel, site) {
      //立即支付 生成订单
      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post(
          "/api/mall/purchaseOrder",
          {
            uid: localStorage.uid,
            sp_id: this.spIdData,
            total: this.total,
            total_mon: this.combined,
            real_pay: this.combined,
            name: name,
            tel: tel,
            site: site
          },
          {
            emulateJSON: true
          }
        )
        .then(kun => {
          console.log(kun);
          Indicator.close();
          if (kun.code == 200) {
            me.goOrderDetails(kun.data.id);
          } else {
            Toast(kun.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    goOrderDetails(val) {
      localStorage.or_id = val;
      //到详情页
      this.$router.push({
        name: "OrderDetails",
        params: { or_id: val }
      });
    }
  },
  props: {
    //下面这些属性会绑定到div上面 详情参照上面的html结构
    // 如： :style="{top:topDistance+'%',width:widNum+'%'}"
    widNum: {
      //内容宽度
      type: Number,
      default: 60
    },
    leftSite: {
      // 左定位
      type: Number,
      default: 50
    },
    topDistance: {
      //top上边距
      type: Number,
      default: 30
    },
    pdt: {
      //上padding
      type: Number,
      default: 10
    },
    pdb: {
      //下padding
      type: Number,
      default: 11
    }
  }
};
</script>

<style lang="scss" scoped>
h4,
p {
  margin: 0;
  padding: 0;
}
.box_left {
  float: left;
}
.box_right {
  float: right;
}

/* 头部 */
.dark-top {
  width: 100%;
  height: 2.75rem;
  color: #ffffff;
  position: fixed;
  top: 0;
  z-index: 9999;
  /* 设置渐变 */
  background: rgb(255, 0, 0); /* Old browsers */
  background: -moz-linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

  .page-back {
    width: 0.5625rem;
    height: 0.9375rem;
    text-decoration: none;
    color: #1a1a1a;
    display: inline-block;
    position: absolute;
    left: 0.9375rem;
    top: 1.0625rem;

    :first-child {
      width: 100%;
      height: 100%;
      background-image: url(../../assets/login/return-white.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      overflow: hidden;
    }
  }

  .page-title {
    font-size: 1.125rem;
    color: #ffffff;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 0.65rem;
    -ms-transform: translateX(-50%) translateY(0); /* IE 9 */
    -moz-transform: translateX(-50%) translateY(0); /* Firefox */
    -webkit-transform: translateX(-50%) translateY(0); /* Safari 和 Chrome */
    -o-transform: translateX(-50%) translateY(0); /* Opera */
  }
}

/* 内容 */
.dark-content {
  top: 4.125rem;
  width: 21.5625rem;
  height: 7.5rem;
  margin: 0 auto;
  margin-top: 0.625rem;
  position: relative;
  box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.05);

  .dark-cont-img {
    width: 4.6875rem;
    height: 6.25rem;
    position: absolute;
    top: 0.625rem;
    left: 0.65625rem;

    :first-child {
      width: 4.6875rem;
      height: 6.25rem;
      border-radius: 0.3125rem;

      background-image: url(../../assets/shop/spimg.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
  }
  .cont-list-right {
    width: 14.96875rem;
    height: 6.25rem;
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;

    h4 {
      font-size: 1rem;
      color: rgba(26, 26, 26, 1);
      line-height: 1.25rem;
    }
    p {
      margin: 0;
      font-size: 0.75rem;
      color: rgba(153, 153, 153, 1);
      line-height: 0.78125rem;
      margin-top: 0.625rem;
    }
    div {
      bottom: 0;
      position: absolute;
      width: 100%;
      .span_yuan {
        font-size: 0.9375rem;
        color: rgba(255, 32, 0, 1);
      }
      .span_button {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 3.46875rem;
        height: 0.9375rem;
        text-align: center;
        line-height: 0.9375rem;
        font-size: 0.75rem;
        color: rgba(51, 51, 51, 1);
        .add {
          border: none;
          width: 0.9375rem;
          height: 0.9375rem;
          border-radius: 0.3125rem;
          float: left;
          background-image: url(../../assets/shop/numadd.png);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          overflow: hidden;
        }
        .cut {
          border: none;
          width: 0.9375rem;
          height: 0.9375rem;
          border-radius: 0.3125rem;
          float: right;
          background-image: url(../../assets/shop/numjian.png);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          overflow: hidden;
        }
      }
    }
  }
}

/* 底部 */
.dark-foot {
  width: 100%;
  height: 2.8125rem;
  box-shadow: 0.125rem 0.125rem 0.125rem 0.125rem rgba(0, 0, 0, 0.05);
  position: fixed;
  bottom: 0;
  background-color: white;

  .foot-left {
    float: left;

    :first-child {
      margin-top: 0.53125rem;
    }
    p {
      font-size: 0.75rem;
      line-height: 0.9375rem;
      margin-left: 0.9375rem;
    }
    .font-left-color {
      color: rgba(255, 32, 0, 1);
    }
  }
  .foot-button {
    float: right;
    width: 5.625rem;
    height: 1.875rem;
    background-color: rgba(255, 32, 0, 1);
    text-align: center;
    line-height: 1.875rem;
    border-radius: 1.25rem;
    position: relative;
    top: 0.46875rem;
    right: 0.9375rem;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 1);
  }
}

//弹框
// 最外层 设置position定位
.dialog {
  position: relative;
  color: #2e2c2d;
}
// 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩
.dialog-cover {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
// 内容层 z-index要比遮罩大，否则会被遮盖，
.dialog-content {
  position: fixed;
  bottom: 0;
  // 移动端使用felx布局
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
//弹框内容
.dialog-content {
  width: 100%;
  height: 23.25rem;
  border-radius: 1.875rem 1.875rem 0 0;
  background-color: white;

  //顶部
  .dialog-top {
    border-bottom: 0.0625rem solid #e6e6e6;
    width: 100%;
    height: 2.9375rem;
    position: absolute;
    top: 0;

    div {
      display: inline-block;
      line-height: 2.9375rem;
      position: absolute;
    }
    .dialog-colse {
      width: 0.8125rem;
      height: 0.8125rem;
      top: 1.21875rem;
      left: 0.90625rem;
      background-image: url(../../assets/shop/clear.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
    .dialog-title {
      font-size: 1.125rem;
      color: #343434;
      font-family: PingFang SC;
      font-weight: 500;

      left: 50%;
      -ms-transform: translateX(-50%) translateY(0); /* IE 9 */
      -moz-transform: translateX(-50%) translateY(0); /* Firefox */
      -webkit-transform: translateX(-50%) translateY(0); /* Safari 和 Chrome */
      -o-transform: translateX(-50%) translateY(0); /* Opera */
    }
    .dialog-clear {
      right: 0.9375rem;
      font-size: 0.75rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      background: linear-gradient(-10deg, #ff8060 0%, #e5284e 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  //内容
  .dialog-con-style {
    width: 18.75rem;
    position: absolute;
    top: 3.875rem;

    .con-style-box {
      margin-bottom: 0.625rem;
      height: 1.875rem;
      position: relative;

      span {
        height: 100%;
        display: inline-block;
        width: 5.25rem;
        font-size: 0.9375rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #343434;
        line-height: 1.875rem;
        text-align: right;
      }
      input {
        outline: none;
        width: 10.9375rem;
        height: 100%;
        border: 0.03125rem solid #dedddd;
        border-radius: 0.3125rem;
        position: absolute;
        right: 1.1875rem;
      }
    }
  }

  //确认按钮
  .dialog-confirm {
    width: 18.75rem;
    height: 3.125rem;
    position: absolute;
    top: 17.375rem;
    border-radius: 1.5625rem;
    line-height: 3.125rem;
    text-align: center;
    font-size: 1.125rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;

    /* 设置渐变 */
    background: rgb(255, 0, 0); /* Old browsers */
    background: -moz-linear-gradient(
      to right bottom,
      rgb(255, 127, 95) 10%,
      rgb(229, 39, 77) 70%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
      to right bottom,
      rgb(255, 127, 95) 10%,
      rgb(229, 39, 77) 70%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
      to right bottom,
      rgb(255, 127, 95) 30%,
      rgb(229, 39, 77) 80%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  }
}
</style>
